<template>
  <div>
    <ZgDialog
      title="新增配置"
      width="80%"
      top="5%"
      v-model="visible"
      @ok="onOk"
      @cancel="cancelFun">
      <div style="display: flex; justify-content: space-between">
        <div style="width: 49%">
          <ZgCard title="源数据">
            <a-form :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
              <a-form-item label="库地址">
                <ZgInput placeholder="请输入库地址" maxLength="255" v-model="formData.email"></ZgInput>
              </a-form-item>
              <a-form-item label="表地址">
                <ZgInput placeholder="请输入表地址" maxLength="255" v-model="formData.email"></ZgInput>
              </a-form-item>
              <a-form-item label="表地址">
                <ZgInput placeholder="请输入表地址" maxLength="255" v-model="formData.email"></ZgInput>
              </a-form-item>
              <div style="float: right; margin-bottom: 10px">
                <ZgButton icon="" @click="connectFun">连接</ZgButton>
              </div>
              <a-divider style="margin-bottom: 10px" />
              <div style="overflow-y: auto; max-height: 360px">
                <!-- <a-form-item v-for="(item,index) in formJson" :key="index" :label="item.label +index">
            <ZgInput v-model="item.value"></ZgInput>
          </a-form-item> -->
                <p v-for="(item, index) in formJson" :key="index" style="cursor: pointer" @click="rightFun(item)">
                  {{ item.label + index }}
                </p>
              </div>
            </a-form>
          </ZgCard>
        </div>
        <div style="width: 49%" v-if="showRight">
          <ZgCard title="详细信息">
            <a-form :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
              <a-form-item label="名称">
                <ZgInput placeholder="请输入名称" maxLength="255" v-model="rightData.label"></ZgInput>
              </a-form-item>
              <a-form-item label="备注">
                <ZgInput placeholder="请输入备注" maxLength="255" v-model="rightData.value"></ZgInput>
              </a-form-item>
              <a-form-item label="类型">
                <ZgInput placeholder="请输入类型" maxLength="255" v-model="rightData.data"></ZgInput>
              </a-form-item>
              <a-form-item label="默认值">
                <ZgInput placeholder="请输入默认值" maxLength="255" v-model="rightData.data"></ZgInput>
              </a-form-item>
              <a-form-item label="入参函数">
                <ZgInput placeholder="请输入入参函数" maxLength="255" v-model="rightData.data"></ZgInput>
              </a-form-item>
              <a-form-item label="出参函数">
                <ZgInput placeholder="请输入出参函数" maxLength="255" v-model="rightData.data"></ZgInput>
              </a-form-item>
              <!-- <div style="float: right;margin-bottom: 10px">
          <ZgButton icon="" @click="connectFun">连接</ZgButton>
        </div> -->
            </a-form>
          </ZgCard>
        </div>
      </div>
    </ZgDialog>
  </div>
</template>
<script>
export default {
  props: {},
  data () {
    return {
      visible: false,
      formData: {},
      formJson: [
        {
          label: '字段1',
          value: 'input1',
          data: 'function1'
        },
        {
          label: '字段2',
          value: 'input2',
          data: 'function2'
        },
        {
          label: '字段3',
          value: 'input3',
          data: 'function3'
        },
        {
          label: '字段4',
          value: 'input4',
          data: 'function4'
        },
        {
          label: '字段2',
          value: 'input2',
          data: 'function4'
        },
        {
          label: '字段3',
          value: 'input3',
          data: 'function2525'
        },
        {
          label: '字段4',
          value: 'input4',
          data: 'function1asdasd'
        },
        {
          label: '字段3',
          value: 'input3',
          data: 'functionasdadsa1'
        },
        {
          label: '字段4',
          value: 'input4',
          data: 'fuasdasdnction1'
        },
        {
          label: '字段2',
          value: 'input2',
          data: 'functasdasgion1'
        },
        {
          label: '字段3',
          value: 'input3',
          data: 'funcasdasd2tion1'
        }
      ],
      showRight: false,
      rightData: {}
    }
  },
  watch: {},
  mounted () {},
  methods: {
    open () {
      this.visible = true
    },
    onOk () {
      this.visible = false
    },
    connectFun () {
      console.log(this.formData, this.formJson, 'formJsonformJson')
    },
    rightFun (item) {
      this.rightData = {}
      this.showRight = true
      this.rightData = { ...item }
    },
    cancelFun () {
      console.log('取消', '这是indiv-pushTask 路径下名为 configurationAdd.vue的文件中的第 26 行🤺🤺🤺')
      this.visible = false
      this.showRight = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .ant-form-item {
  margin-bottom: 14px !important;
}
</style>
